<template>
	<uni-popup ref="popupRef" type="bottom">
		<view class="bg-white rounded-t-xl">
			<!-- 标题 -->
			<view class="center p-2 relative">
				<view class="text-[24rpx]">壁纸信息</view>
				<view class="p-2 absolute right-0 top-0">
					<uni-icons type="closeempty" size="20" @click="() => popupRef.close()" />
				</view>
			</view>
			<!-- 内容 -->
			<scroll-view scroll-y class="bg-white max-h-[60vh] p-4 !box-border">
				<view class="item">
					<view class="label">壁纸ID</view>
					<text class="content" selectable user-select>{{ info._id }}</text>
				</view>
				<view class="item">
					<view class="label">作者</view>
					<text class="content" selectable user-select>{{ info.nickname }}</text>
				</view>
				<view class="item">
					<view class="label">评分</view>
					<uni-rate :value="info.score" allowHalf readonly />
				</view>
				<view class="item">
					<view class="label">摘要</view>
					<text class="content tracking-wide" selectable user-select>
						{{ info.description }}
					</text>
				</view>
				<view class="item">
					<view class="label">标签</view>
					<view class="flex gap-2">
						<uni-tag v-for="tag in info.tabs" :key="tag" inverted circle :text="tag" type="success" size="mini" />
					</view>
				</view>
				<view class="p-2 bg-[#e9e9e9] rounded-lg tracking-wider text-[rgba(0,0,0,.7)]">
					声明: 本图片来自用户投稿,非商业使用,用于免费学习交流,如侵犯了您的权益, 您可以拷贝壁纸ID举报至平台,邮箱
					<text selectable user-select>879906269@qq.com</text>
					, 管理将删除侵权壁纸,维护您的权益
				</view>
			</scroll-view>
		</view>
	</uni-popup>
</template>

<script setup>
	import { ref } from 'vue'
	import { useExpose } from '@/hooks'
	defineProps({
		info: { type: Object, default: () => ({}) }
	})
	const popupRef = ref(null)

	defineExpose(useExpose(popupRef))
</script>

<style scoped lang="scss">

	.item {
		@apply flex gap-2 py-3;

		.label {
			@apply w-[120rpx] text-right text-mp_tc3;
			font-size: 26rpx;

			&::after {
				content: ':';
				display: inline-block;
				margin-left: 5rpx;
			}
		}

		.content {
			flex: 1;
			font-size: 28rpx;
			line-height: 38rpx;
			color: rgba(0, 0, 0, 0.9);
		}
	}
</style>
